import { reactive, ref } from 'vue'
import { defineStore } from 'pinia'
import { createStore } from 'vuex'
import {  routes } from '@/router'

/*
  定义一个基于 Pinia 的 Store
  第1个参数 web 是 useWebStore 在应用中的唯一标识符(ID)
  第2个参数是 Setup函数 或 Option对象
*/
export const useWebStore = defineStore('web', () => {
  //定义一个响应式对象，存储网站信息
  const web = reactive({
    title: "邓瑞编程",
    url: "dengruicode.com"
  })

  //定义一个响应式引用，存储用户数
  const users = ref(1000)
  
  //定义方法
  const userAdd = () => {
    users.value++
  }

  return {
    web,
    users,
    userAdd,
    routes
  }
})


export default createStore({
    state: {  // 用来写要存储的状态（数据）
        count: 0,
        name: '张三',
        age: 16,
        nickName: "",
        cartCount: 0,
        resturantName: '飞歌餐馆', // 默认值
        cRoutes: [],
        addRoutes: [],
        baseURL: "http://localhost:8081"
    },
    mutations: {
    // 修改state数据的唯一方法就是提交mutation
    // 进行数据更新，改变数据状态
        add(state){ //定义count自增的规则
          state.count=state.count+1 //修改时state地址不能变，否则无法相应，例如state={...state,a:111}不行
        },
        getname(state,newVal){
          this.state.name=newVal;
        },
        SET_ROUTES: (state,routes) => {
          state.cRoutes = routes
        }
    },
    actions: {
    // 异步处理数据的方法 通过提交mutation修改数据 不建议直接修改 这里直接修改也可以 但是当前情况下框架不完善 所以不建议直接修改
    // 执行动作，数据请求
        addCount({commit}){
            fetch('../data.json')
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                let action = {
                    type: 'countType',
                    payload: myJson.text
                }
                commit(action)
            });
        },
        getnameAsync(){ 
        }
        // generateRoutes({ commit }) {
        //   return new Promise(resolve => {
        //     let accessedRoutes = filterAsyncRoutes(asyncRoutes)
        //     commit('SET_ROUTES', accessedRoutes)
        //     resolve(accessedRoutes)
        //   })
        // }
      },
    getters: {  
      // 相当于vue中的计算属性
      // 获取到最终的数据结果
        getCount(state){
            return state.count
        },
        getRoutes(state){
          return state.cRoutes
        },
        changeAge(state) {
          return state.age + '岁'
        },
        permission_routes: state => state.cRoutes,
        baseURL: state => state.baseURL,
    },
    modules: { // 模块化方法
    },
    plugins: [] // 插件使用的位置 
})
